<template>
    <div class="flex-wrap" @click="ck">
        <img class="img" :src="img" alt="">
        <div>
            <h3 style="margin-bottom: 5px;">{{name}} <small style="font-size: 10px;color:#EB8038">{{level}}</small></h3>
            <p>{{text}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "List",
        props: {
            level:{
                default:'',
                type:String
            },
            name: {
                default: "名字",
                type: String
            },
            img: {
                default: 'https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019X3gWvILU7J1571983543.png',
                type: String
            },
            text: {
                default: '内容',
                type: String
            }
        },
        data() {
            return {}
        },
        mounted() {
        },
        methods: {
            ck(){
                this.$emit('click')
            }
        },
    }
</script>

<style scoped lang="scss">
    .flex-wrap {
        background-color: #fff;
        display: flex;
        align-items: center;

        p{
            width: 550px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 23px;
            color:#999;
        }
    }

    .img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 20px;
    }
</style>